<template>
  <el-progress
      :type="props.circle ? 'circle':'line'"
      :text-inside="!props.circle"
      :stroke-width="props.strokeWidth"
      :percentage="percentage"
      :color="customColorMethod"
      :status="percentage >= 100 ? 'success':null"
  />
</template>

<script setup lang="ts">
const props = defineProps({
  percentage: {
    type: Number,
    default: 0
  },
  circle: {
    type: Boolean,
    default: false
  },
  strokeWidth: {
    type: Number,
    default: 20
  }
});
const {percentage} = toRefs(props);
const customColorMethod = (percentage: number) => {
  if (percentage <= 30) {
    return '#909399'
  }
  if (percentage <= 80) {
    return '#e6a23c'
  }
  return '#67c23a'
}
</script>

<style scoped lang="scss">
</style>